<template>
  <scroll-view class="flex-col page" scroll-y>
    <!-- <text class="main_title">首页</text> -->
    <view class="flex-col justify-start relative group">
      <view class="flex-col section" style="margin-bottom: 50rpx">
        <view class="flex-col self-stretch">
          <!-- 顶部导航栏 -->
          <view class="header">
            <view class="nav-tabs">
              <view
                :class="['nav-item ', 'iconfont', 'xlmicon-shezhi font_shezhi', currentTab === 'news' ? 'active' : '']"
                @click="switchTab"
                data-tab="news"
              >
                <text class="text">新闻</text>
              </view>
              <view
                :class="[
                  'nav-item',
                  'iconfont',
                  'xlmicon-dingdan font_dingdan',
                  currentTab === 'activity' ? 'active' : '',
                ]"
                @click="switchTab"
                data-tab="activity"
              >
                <text class="text">活动</text>
              </view>
              <view
                :class="['nav-item', 'iconfont', 'xlmicon-dingdan font_dingdan', currentTab === 'club' ? 'active' : '']"
                @click="switchTab"
                data-tab="club"
              >
                <text class="text">俱乐部</text>
              </view>
              <view
                :class="[
                  'nav-item',
                  'iconfont',
                  'xlmicon-dingdan font_dingdan',
                  currentTab === 'cooperation' ? 'active' : '',
                ]"
                @click="switchTab"
                data-tab="cooperation"
              >
                <text class="text">赛事合作</text>
              </view>
              <view
                :class="['nav-item', 'iconfont', 'xlmicon-dingdan font_dingdan', currentTab === 'live' ? 'active' : '']"
                @click="switchTab"
                data-tab="live"
              >
                <text class="text">比赛直播</text>
              </view>
            </view>
          </view>

          <!-- 主广告轮播 -->
          <swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :circular="true">
            <swiper-item v-for="(item, index) in swiperList" :key="index">
              <view class="banner-content">
                <image v-if="item.url" :src="item.url" class="image_10" style="width: 100%; height: 100%" />
              </view>
            </swiper-item>
          </swiper>

          <!-- 赛事分类筛选 -->
          <scroll-view class="category-scroll" scroll-x>
            <view class="category-tabs">
              <text class="tab-item active">全部</text>
              <text class="tab-item">田径</text>
              <text class="tab-item m-r-auto">成人</text>
              <text class="tab-item bg_color_tr color_2a3a6c tab-item-right">按时间</text>
              <text class="tab-item bg_color_tr color_666">按距离</text>
            </view>
          </scroll-view>

          <!-- 赛事列表 -->
          <view class="event-list">
            <view class="event-card" v-for="(item, index) in eventList" :key="index">
              <view class="event-header">
                <image class="event_bg" v-if="item.imgUrl" :src="item.imgUrl"></image>
              </view>
              <text class="event-title">{{ item.eventName || '' }}</text>
              <view class="event-info">
                <text>比赛日期 :</text>
                <text class="event-info-value">{{ item.raceDate || '' }}</text>
                <text class="event-info-value">{{ item.raceType || '' }}</text>
              </view>
              <view class="event-info">
                <text>截止日期 :</text>
                <text class="event-info-value">{{ item.deadline || '' }}</text>
              </view>
              <view class="event-info">
                <text>地址 :</text>
                <text class="event-info-value m-r-auto">{{ item.address || '' }}</text>
                <view class="distance" v-if="item.distance">
                  <uv-icon name="map" :color="'#1a73e8'" size="28"></uv-icon>
                  <text class="distance_text">{{ item.distance || '' }}km</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 200rpx"></view>
    <XlmExpressTabbar :current="0" />
  </scroll-view>
</template>
<script setup lang="ts">
import XlmExpressTabbar from '@/components/XlmExpressTabbar/index.vue';
import { ref } from 'vue';
import { imgUrl } from '@/utils/config';
import { onShow } from '@dcloudio/uni-app';

const currentTab = ref('news');
// 切换导航标签
const switchTab = (e) => {
  currentTab.value = e.currentTarget.dataset.tab;
};
// 获取首页轮播图
const swiperList = ref([
  { url: imgUrl + 'a.jpg' },
  { url: imgUrl + 'b.jpg' },
  { url: imgUrl + 'c.jpg' },
]);
const eventList = ref([
  {
    imgUrl: 'https://cdn.pixabay.com/photo/2021/01/04/07/38/lily-5886728__340.jpg',
    eventName: '草源体育公开赛田径运动 . 郑州站',
    raceDate: '2025.10.12',
    raceType: '田径',
    deadline: '2025.12.12 12:00:00',
    address: '北京市朝阳区国际文化产业园2049',
    distance: '12.98',
  },
  {
    imgUrl: 'https://cdn.pixabay.com/photo/2021/01/04/07/38/lily-5886728__340.jpg',
    eventName: '草源体育公开赛田径运动 . 开封站',
    raceDate: '',
    raceType: '',
    deadline: '',
    address: '',
    distance: '',
  },
]);
onShow(() => {
  try {
    uni.hideTabBar();
  } catch (error) {}
});
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>